<template>
  <el-dialog
    title="提示"
    :visible.sync="GdpfDialog"
    append-to-body
    width="500px"
    class="GdpfLog"
  >
    <div
      style="
        cursor: pointer;
        width: 40px;
        height: 40px;
        position: absolute;
        right: 2vh;
      "
      @click="close()"
    ></div>
    <div
      style="
        font-family: SourceHanSansSC, SourceHanSansSC;
        font-weight: bold;
        font-size: 24px;
        color: #ffffff;
        line-height: 35px;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
        text-align: center;
        font-style: normal;
      "
    >
      工单派发
    </div>
    <div style="margin-top: 2vh">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="90px">
        <el-form-item label="接收单位" prop="jsdw">
          <el-select
            ref="selectTree"
            v-model="form.jsdw"
            placeholder="请选择接收单位"
            style="width: 100%"
          >
            <el-option
              v-for="item in optionMData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              style="display: none"
            >
            </el-option>

            <el-tree
              ref="selectelTree"
              :data="treeOp"
              :props="defaultProps"
              @node-click="handleNodeClick"
              :expand-on-click-node="true"
              highlight-current
            >
            </el-tree>
          </el-select>
          <!-- <el-cascader
              v-model="form.jsdw"
              :options="treeOp"
              :show-all-levels="false"
              style="width: 100%"
              :props="props"
            ></el-cascader> -->
        </el-form-item>
        <el-form-item label="处理时限" prop="clsx">
          <el-date-picker
            type="date"
            placeholder="选择处理时限"
            v-model="form.clsx"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="下达单位">
          <el-input
            v-model="form.xddwName"
            placeholder="请输入下达单位"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="下达时间">
          <el-date-picker
            placeholder="请选择下达时间"
            v-model="form.xdsj"
            type="datetime"
            style="width: 100%"
            :disabled="true"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="下达人">
          <el-input
            v-model="form.xdr"
            placeholder="请输入下达人"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="处理要求">
          <el-input
            v-model="form.clxq"
            type="textarea"
            placeholder="请输入处理要求"
          ></el-input>
        </el-form-item>
      </el-form>

      <div
        style="
          display: flex;
          flex-direction: row;
          justify-content: center;
          margin-top: 40px;
        "
      >
        <el-button
          style="
            width: 120px;
            height: 40px;
            background: rgba(16, 29, 52, 0.8);
            border-radius: 2px;
            color: #ffffff;
            border-width: 0px;
          "
          @click="GdpfDialog = false"
          >取消</el-button
        >

        <el-button
          style="
            width: 120px;
            height: 40px;
            background: #4bc7ff;
            border-radius: 2px;
            color: #ffffff;
            border-width: 0px;
          "
          @click="submit()"
          >确认</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { parseTime } from "@/utils/dateTime";
import { deptTree, workOrderAdd } from "@/api/daping/daping";
export default {
  dicts: [
    "gd_dw",
    "warn_handle_status",
    "warn_type",
    "warn_fabu_status",
    "warn_yjlb",
  ],
  data() {
    return {
      GdpfDialog: false,
      userData: null,
      optionMData: [],
      treeOp: [],
      defaultProps: { label: "label", value: "id" },
      form: {
        xddwName: "",
        xddw: "",
        zpr: "itssky",
        xdsj: parseTime(new Date()),
      },
      rules: {
        jsdw: [
          { required: true, message: "请选择接收单位", trigger: "change" },
        ],
        clsx: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.getDeptTree();
    this.userData = this.$store.state.user.user;
    this.form.xddw = this.userData.deptId;
    this.form.xddwName = this.userData.dept.deptName;
    this.form.xdr = this.userData.userName;
    this.form.xdrId = this.userData.userId;
    this.form.xdsj = parseTime(new Date());
  },
  methods: {
    async getCk(item) {
      this.userData = this.$store.state.user.user;
      this.form.xddw = this.userData.deptId;
      this.form.xddwName = this.userData.dept.deptName;
      this.form.xdr = this.userData.userName;
      this.form.xdrId = this.userData.userId;
      this.form.xdsj = parseTime(new Date());
      this.form.yjid = item.id;
      this.GdpfDialog = true;
    },
    getDeptTree() {
      deptTree().then((res) => {
        if (res.code == 200) {
          this.treeOp = res.data;
          this.optionMData = this.optionData(this.treeOp);
        }
      });
    },
    handleNodeClick(node) {
      this.$set(this.form, "jsdw", node.id);
    },
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          workOrderAdd(this.form).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "派单成功！",
                type: "success",
              });
              this.GdpfDialog = false;
              this.close();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    optionData(arr, result = []) {
      arr.forEach((item) => {
        result.push({ label: item.label, value: item.id });
        if (item.children && item.children.length !== 0) {
          this.optionData(item.children, result);
        }
      });
      return JSON.parse(JSON.stringify(result));
    },
    close() {
      this.GdpfDialog = false;
      this.$parent.getCallback();
    },
  },
};
</script>
<style scoped>
::v-deep .el-dialog {
  background: none;
}
.GdpfLog ::v-deep .el-dialog__body {
  background: url("~@/assets/images/ld/addBg.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 550px;
  /* height: auto; */
}
::v-deep .el-dialog__header {
  display: none;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 15vh !important;
  background-color: transparent;
}
::v-deep .el-form-item__label {
  color: #fff;
}
::v-deep .el-textarea__inner {
  background: rgba(255, 255, 255, 0.3) !important;
  font-family: SourceHanSansSC, SourceHanSansSC;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff !important;
  line-height: 20px;
  text-align: left;
  font-style: normal;
}
::v-deep .el-input--medium .el-input__inner {
  background: rgba(255, 255, 255, 0.3) !important;
  font-family: SourceHanSansSC, SourceHanSansSC;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff !important;
  line-height: 20px;
  text-align: left;
  font-style: normal;
}
</style>
